<template>
  <el-dialog title="编辑候选人信息" :visible.sync="dialogVisible" width="900px" append-to-body :close-on-click-modal="false">
    <el-form ref="form" :model="baseInfos" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请填写姓名' }]">
            <el-input v-model="baseInfos.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="照片" prop="avatar" :rules="[{ required: true, message: '请上传照片' }]">
            <div class="text-center">
              <userAvatar :avatar="baseInfos.avatar" @imageUrl="getAvatar" />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '请填写性别' }]">
            <el-select style="width: 100%" v-model="baseInfos.sex" placeholder="请选择性别" clearable>
              <el-option v-for="dict in genderOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标签" prop="labs" :rules="[{ required: true, message: '请选择标签', trigger: 'blur' }]">
            <el-select style="width: 100%" v-model="baseInfos.labs" multiple placeholder="请选择标签">
              <el-option v-for="item in labList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="birthday" :rules="[{ required: true, message: '请选择出生年月' }]">
            <el-date-picker v-model="baseInfos.birthday" type="date" placeholder="请选择日期" style="width: 100%"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学校" prop="school" :rules="[{ required: true, message: '请填写学校' }]">
            <el-input v-model="baseInfos.school"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业" prop="major" :rules="[{ required: true, message: '请填写专业' }]">
            <el-input v-model="baseInfos.major"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="famous" :rules="[{ required: true, message: '请填写民族' }]">
            <el-input v-model="baseInfos.famous"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高" prop="height" :rules="[{ required: true, message: '请填写身高' }]">
            <el-input v-model="baseInfos.height"> <template slot="append">cm</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="体重" prop="weight" :rules="[{ required: true, message: '请填写体重' }]">
            <el-input v-model="baseInfos.weight">
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="hometown" :rules="[{ required: true, message: '请填写籍贯' }]">
            <el-input v-model="baseInfos.hometown"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否单身" prop="dog" :rules="[{ required: true, message: '请填写是否单身' }]">
            <el-input v-model="baseInfos.dog"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称/外号" prop="nickName" :rules="[{ required: true, message: '请填写昵称/外号' }]">
            <el-input v-model="baseInfos.nickName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职业" prop="work" :rules="[{ required: true, message: '请填写职业' }]">
            <el-input v-model="baseInfos.work"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系方式" prop="phone" :rules="[{ required: true, message: '请填写联系方式' }]">
            <el-input v-model="baseInfos.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="现居地" prop="address" :rules="[{ required: true, message: '请填写现居地' }]">
            <el-input v-model="baseInfos.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="社交平台账号" prop="social" :rules="[{ required: true, message: '请填写社交平台账号' }]">
            <el-input v-model="baseInfos.social"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有/无经纪公司" prop="agent" :rules="[{ required: true, message: '请填写' }]">
            <el-input v-model="baseInfos.agent"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="MBTI" prop="mbti" :rules="[{ required: true, message: '请填写MBTI' }]">
            <el-input v-model="baseInfos.mbti"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs>
      <el-tab-pane :label="candInfo.projectName">
        <el-form ref="projectForm" :model="projectForm" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12" v-for="(item, index) in rowColumnForm" :key="index">
              <el-form-item :label="item.key" :prop="item.column_id" :rules="{
                required: item.require == 'yes',
                message: '不能为空',
                trigger: 'blur'
              }">
                <el-input v-model="projectForm[item.column_id]"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { editCandidate } from '@/api/system/candidate'
import { listLab } from '@/api/system/lab'
import userAvatar from '@/views/system/artist/components/userAvatar'

export default {
  dicts: ['sys_user_sex'],
  props: {
    visible: {
      type: Boolean
    },
    projectOptions: {
      type: Array,
      default: () => []
    },
    candInfo: {
      type: Object,
      default: () => { }
    }
  },
  mixins: [],
  components: { userAvatar },
  data() {
    return {
      dialogVisible: this.visible,
      baseInfos: {},
      projectForm: {},
      rowColumnForm: [],
      genderOptions: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      activeName: '',
      // 弹出层标题
      title: '',

      // 表单参数
      form: {
        avatar: '',
        name: '',
        sex: '',
        birthday: '',
        school: '',
        major: '',
        famous: '',
        height: '',
        weight: '',
        hometown: '',
        dog: '',
        nickName: '',
        work: '',
        phone: '',
        address: '',
        social: '',
        agent: '',
        mbti: '',
        labs: []
      },
      labList: []
    }
  },
  computed: {
    // Your computed here
  },
  watch: {
    dialogVisible: {
      handler(val) {
        this.$emit('update:visible', val)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getBaseInfos() {
      const base = Object.assign({}, this.candInfo)
      this.baseInfos = {
        avatar: base.avatar,
        name: base.name,
        sex: base.sex,
        birthday: base.birthday,
        school: base.school,
        major: base.major,
        famous: base.famous,
        height: base.height,
        weight: base.weight,
        hometown: base.hometown,
        dog: base.dog,
        nickName: base.nickName,
        work: base.work,
        phone: base.phone,
        address: base.address,
        social: base.social,
        agent: base.agent,
        mbti: base.mbti,
        labs: base.labs
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.projectForm.validate(valid => {
        if (!valid) {
          return false
        }
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.candInfo = Object.assign(this.candInfo, this.baseInfos)
            this.rowColumnForm.map(r => {
              r.value = this.projectForm[r.column_id]
            })

            this.candInfo.projectInfo = JSON.stringify(this.rowColumnForm);
            // this.candInfo.projectInfoList.map(r => {
            //   if (r.projectId == this.candInfo.projectId) {
            //     r.projectInfo = JSON.stringify(this.rowColumnForm)
            //   }
            // })

            editCandidate(this.candInfo).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.dialogVisible = false
              this.$emit('update')
            })
          }
        })
      })
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
    },
    getLabList() {
      listLab({
        pageNum: 1,
        pageSize: 999
      }).then(response => {
        this.labList = response.rows
      })
    },
    getAvatar(url) {
      this.baseInfos = {
        ...this.baseInfos,
        avatar: url
      }
    },
    getProjectColumn() {
      this.rowColumnForm = JSON.parse(this.candInfo.projectInfo) || []
      this.rowColumnForm.map(r => {
        this.$set(this.projectForm, r.column_id, r.value)
      })
    }
  },
  created() {
    console.log(this.candInfo)
  },
  mounted() {
    this.getLabList()
    this.getBaseInfos()
    this.getProjectColumn()
  }
}
</script>

<style scoped>
/* Your styles here */
</style>
